<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <!-- 三行三列的表格 -->
    <table width="300" height="300" border="1" bordercolor="green" bgcolor="yellow" cellspacing="0"
    align="center" valign="middle">
        <tr align="center" valign="top">
            <td colspan="2">1</td>
            
            <td rowspan="2">3</td>
        </tr>
        <tr>
            <td align="center" valign="top">4</td>
            <td>5</td>
        </tr>
        <tr>
            <td>7</td>
            <td>8</td>
            <td>9</td>
        </tr>
    </table>
</body>
</html>
<!-- 
    表格的使用：
        了解：表格是用来做网页布局的，比较麻烦(涉及到计算属性)，只做数据的展示~
        标签名称：table 表格的外围结构
                    tr 行
                        td 列

        表格的属性
            - width/height 宽、高
            - border:边框
            - bordercolor 边框颜色
            - bgcolor 背景颜色
            - cellspacing 单元格与单元格之间的距离
            - cellpadding 单元格与内容之间的距离
            - align 水平方向对齐方式 left center right
                - 给table添加表示控制表格水平方向对齐方式
                - 给tr - 行
                - 给td - 列
            - valign 垂直方向对齐方式 vertical top bottom middle
                - 无法控制表格在垂直方向上对齐方式
                - 可以控制tr和td
        难点以及重点：
            - colspan 列合并
            - rowspan 行合并
            - 属性值都为数字，合并个数
            - 跨行合行、跨列合列
 -->